﻿<template id="__models_employeedetail">
    <div>
        <div class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">ID</label>
                <div class="col-sm-6">
                    <input type="number" readonly class="form-control" :value="GetDetail.result.item.EmployeeID">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">FirstName</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" :value="GetDetail.result.item.FirstName">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">LastName</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" :value="GetDetail.result.item.LastName">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Title</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" :value="GetDetail.result.item.Title">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Phone</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" :value="GetDetail.result.item.HomePhone">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Country</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" :value="GetDetail.result.item.Country">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Region</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" :value="GetDetail.result.item.Region">
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">City</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" :value="GetDetail.result.item.City">
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Address</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" :value="GetDetail.result.item.Address">
                </div>
            </div>

        </div>

        <table class="table">
            <thead>
                <tr>
                    <th>OrderID</th>
                   
                    <th>Customer</th>
                    <th>OrderDate</th>
                    <th>RequiredDate</th>
                    <th>ShipCountry</th>
                    <th>ShipCity</th>
                    <th>ShipAddress</th>
                    <th>RequiredDate</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in GetDetail.result.orders.items">
                    <td>{{item.OrderID}}</td>
                  
                    <td>{{item.Customer.CompanyName}}</td>
                    <td>{{item.OrderDate}}</td>
                    <td>{{item.RequiredDate}}</td>
                    <td>{{item.ShipCountry}}</td>
                    <td>{{item.ShipCity}}</td>
                    <td>{{item.ShipAddress}}</td>
                    <td>{{item.ShipAddress}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    Vue.component('models_employeedetail', {
        props: ["token"],
        data: function () {
            return {
                employeeid: this.token.id,
                GetDetail: new beetlexAction("/GetEmployeeDetail", { id: 0 }, { item: {}, orders: [] }),
              
            }
        },
        methods: {

        },
        watch: {
            token(val) {
                this.employeeid = val.id;
                this.GetDetail.get({ id: val.id });
            }
        },
        mounted: function () {
            var _this = this;
            this.GetDetail.get({ id: this.token.id });
        },
        template: __models_employeedetail,
    })
</script>